<!-- 参团详情 -->
<template>
	<view class="v-delegation-page">
		<!-- 轮播图 -->
		<swiper v-if="carousel" autoplay="true" class="v-cover" :circular="true">
			<swiper-item v-for="(item, index) in carousel" :key="index"><image class="v-cover" :src="item"></image></swiper-item>
		</swiper>
		<view class="v-top">
			<view class="flex-between v-bg">
				<view class="flex-align-center">
					<!-- <view class="v-group-bj">团购价</view> -->
					<view class="v-group-bj">当前价</view>
					<view class="flex-bottom v-commodity-price">
						<view class="v-price" v-if="detailInfo.discount">
							￥
							<text>{{ detailInfo.discount.split('.')[0] }}.</text>
							{{ detailInfo.discount.split('.')[1] }}
						</view>
						<view class="v-original-price flex-column" v-if="Number(detailInfo.original_price) != Number(detailInfo.discount)">
							￥{{ detailInfo.original_price }}
							<text></text>
						</view>
					</view>
				</view>
				<view class="color-fff" v-if="notShow == 2">{{ detailInfo.pe_count }}人已{{ detailInfo.has_buy == true ? '参团' : '报名' }}</view>
			</view>
			<view class="v-conent flex-between">
				<view class="v-fontsize32 v-bold font-overflow2">{{ detailInfo.foods_name }}</view>
				<!-- 评分——星星 -->
				<view class="flex-align-center">
					<uni-rate :readonly="true" :value="percent_1" :max="5" size="18" activeColor="#FF5F4E" margin="5" />
					<view class="v-star-score">{{ Number(percent_1).toFixed(1) }}</view>
				</view>
			</view>
			<view class="v-details font-overflow2">{{ detailInfo.summary }}</view>
			<!-- 报名 拼团：人数展示 has_buy:false(未参团)-->
			<view class="v-share-padding">
				<pro-gress :list="Steps" :StepInfo="StepInfo"></pro-gress>
				<!-- notShow==1 为“未开始”团购 -->
				<!-- //活动状态 1 未开始 2 进行中 3 已结束 -->
				<block v-if="notShow == 2">
					<view class="flex-between v-p-share">
						<view class="v-m-width not-font-overflow flex1">
							<block v-for="(item, index) in detailInfo.peoples.slice(0, 8)" :key="index"><image class="pt_img" :src="item.avatar"></image></block>
						</view>
						<view class="flex-align-center v-share-friend">
							<text>已有{{ detailInfo.pe_count }}人报名</text>
							<view class="flex v-btncss" v-if="!uid" @click="handleLogin()">分享好友</view>
							<button open-type="share" class="v-btncss" v-else><view class="flex">分享好友</view></button>
						</view>
					</view>
					<view class="v-share-bottom flex" v-if="timeEnd">
						<text>结束时间</text>
						{{ timeEnd }} 结束
					</view>
				</block>
				<block v-if="notShow == 3">
					<view class="flex-between v-p-share">
						<view class="v-m-width not-font-overflow flex1">
							<block v-for="(item, index) in detailInfo.peoples.slice(0, 12)" :key="index"><image class="pt_img" :src="item.avatar"></image></block>
						</view>
						<view class="flex-align-center v-share-friend2">
							<text>已有{{ detailInfo.pe_count }}人报名</text>
						</view>
					</view>
				</block>
			</view> 
			<view class="flex-between v-commission" v-if="notShow == 2">
				<text>{{ commission > 0 && distributionSet.distribution_level != 0 ? '预估佣金￥' + commission : '暂无佣金' }}</text>
				<view class="v-btncss2" v-if="!uid" @click="handleLogin()">
					<view class="flex-align-center">
						<text class="iconfont share-icon">&#xe624;</text>
						分享赚
					</view>
				</view>
				<button open-type="share" class="v-btncss2" v-else>
					<view class="flex-align-center">
						<text class="iconfont share-icon">&#xe624;</text>
						分享赚
					</view>
				</button>
			</view>
			<view class="flex-between v-type">
				<view>销售{{ detailInfo.sales>=10 ? detailInfo.sales : '<10' }}</view>
				<view>浏览{{ detailInfo.browse_number }}</view>
				<view class="btncss" v-if="!uid" @click="handleLogin()">
					<view class="flex-align-center">
						<image src="/static/zf.png" class="v-img"></image>
						分享{{ detailInfo.share_number }}
					</view>
				</view>
				<button open-type="share" class="btncss" v-else>
					<view class="flex-align-center">
						<image src="/static/zf.png" class="v-img"></image>
						分享{{ detailInfo.share_number }}
					</view>
				</button>
			</view>
		</view>
		<view class="v-height"></view>
		<!-- 产品参数/版本更新/用户评价 -->
		<type typeId="2" :navIndex="navIndex" :typeList="typeList" :ids="id" ref="types" :richText="detailInfo.text_desc" :softwareDesc="softwareDesc"></type>

		<!-- 定位 ‘分享’ 图标 -->
		<view class="flex-column v-fixed">
			<view class="flex-column v-icon2" @click="share()">
				<image src="/static/forward.png"></image>
				<view>分享</view>
			</view>
			<!--  open-type="contact"  @contact="handleContact"-->
			<button class="btncss" style="	background-color: rgb(85 0 0 / 0%);" @click="$sun.kf">
				<view class="flex-column v-icon">
					<image src="/static/customerService.png"></image>
					<view>客服</view>
				</view>
			</button>
			<view class="flex-column v-icon" @click="popClick()">
				<image src="/static/eram.png"></image>
				<view style="margin-top: 6rpx;">进群</view>
			</view>
		</view>
		<!-- 原：height: 160rpx;（增加了倒计时） -->
		<view style="height: 250rpx;"></view>
		<!-- 倒计时 时间戳 -->
		<view class="v-down-padding flex-align-center" v-if="time && time != undefined && notShow == 2">
			<view class="v-yu">距离报名截止时间还剩</view>
			<view class="v-count-down flex-align-center">
				<view>{{ time.days }}</view>
				<text>天</text>
				<view>{{ time.hour }}</view>
				<text>:</text>
				<view>{{ time.min }}</view>
				<text>:</text>
				<view>{{ time.sec }}</view>
			</view>
		</view>
		<!-- 底部button -->
		<view class="v-bottom-fixed flex-columns" :class="time && time != undefined ? '' : 'v-border-btn'">
			<view class="flex-align-center v-p-fixed">
				<!-- <view class="flex-column v-cart" @click="toGwc()">
					<image src="/static/tabbar/shopCartSelect.png"></image>
					<view>购物车</view>
				</view> -->
				<view class="flex-column v-cart" @click="toIndex()">
					<image src="/static/indexs.png"></image>
					<view>首页</view>
				</view>
				<view class="flex-column v-cart" @click="share()" v-if="notShow == 2 && detailInfo.has_buy != true">
					<image src="/static/forward2.png"></image>
					<view>分享赚</view>
				</view>
				<!-- //活动状态 1 未开始 2 进行中 3 已结束 -->
				<block v-if="notShow != 2">
					<view class="flex v-not-btn">{{ notShow == 3 ? '已结束' : '未开始' }}</view>
				</block>
				<block v-else>
					<!-- has_buy（bool类型字段 ）：true 已买 ,false 没买 -->
					<view class="flex" :class="detailInfo.has_buy == true ? 'v-btn' : 'v-btn2'" @click="buy()">
						<image v-if="detailInfo.has_buy == true" src="/static/fire.png"></image>
						<text v-if="detailInfo.has_buy == true">
							参团购买￥{{detailInfo.discount}}
						</text>
						<text v-else>
							<!-- is_zero_pay 是否开启零元报名 1否 2是 -->
							{{detailInfo.entry_price <= 0 || detailInfo.is_zero_pay==2?'免费报名': '报名参团￥' + detailInfo.entry_price}}
						</text>
						<!-- {{
							detailInfo.has_buy == true
								? '参团购买￥' + detailInfo.discount
								: detailInfo.has_buy == false && detailInfo.entry_price <= 0 || is_zero_pay
								? '免费报名'
								: '报名参团￥' + detailInfo.entry_price
						}} -->
				</view>
				</block>
			</view>
		</view>
		<!-- 分享 -->
		<sunui-popup ref="pop">
			<template v-slot:content>
				<view class="v-pop flex-column">
					<view class="width100">
						<view class="flex-between v-pop-margin">
							<view class="flex-column v-select-type" @click="cancel()">
								<button open-type="share" class="btncss">
									<view class="flex"><image src="/static/share/shareWx.png"></image></view>
								</button>
								<text>分享给朋友</text>
							</view>
							<view class="flex-column v-select-type" @click="poster()">
								<view class="flex"><image src="/static/share/shareImg.png"></image></view>
								<text>生成海报</text>
							</view>
						</view>
					</view>
					<view class="v-cancel flex" @click="cancel()">取消</view>
				</view>
			</template>
		</sunui-popup>
		<!-- 二维码 -->
		<sunui-popup ref="popCode">
			<template v-slot:content>
				<view class="v-pop-code">
					<view class="flex-column v-qr-code">
						<image :show-menu-by-longpress="true" :src="kfImg" @click="previewImage"></image>
						<text>扫一扫或长按保存扫码进群</text>
					</view>
					<view class="flex" @click="popCodeClose"><image class="v-close-img" src="/static/close.png"></image></view>
				</view>
			</template>
		</sunui-popup>
		<!-- 购买 —— 弹框 -->
		<sunui-popup ref="popbuy">
			<template v-slot:content>
				<view class="v-pop-buy">
					<view class="v-sevice">周期服务</view>
					<block v-for="(i, j) in 5" :key="j"><view class="v-buy-type">服务套餐 996/12个月</view></block>
				</view>
			</template>
		</sunui-popup>
	</view>
</template>

<script>
function unparam(str = '', unDecodeURI) {
	let result = {};
	let arr = str.split('&');
	arr.forEach((item, idx) => {
		let param = item.split('='),
			name = param[0],
			value = param[1] || '';
		if (name) {
			result[name] = unDecodeURI ? value : decodeURIComponent(value);
		}
	});

	return result;
}
import timeHMS from '@/common/js/time.js';
import proGress from '@/components/progress/progress.vue';
export default {
	components: {
		proGress
	},
	data() {
		return {
			notShow: 0,
			time: {},
			timeHMS,
			timer: null, //定义计时器，以便全局访问
			// 分销传入的pid2
			pid2: '',
			uid: uni.getStorageSync('uid'),
			// 结束时间
			timeEnd: '',
			// 佣金
			commission: 0,
			pid: uni.getStorageSync('pid') ? uni.getStorageSync('pid') : '',
			// pid: 0,
			distributionSet: uni.getStorageSync('system').distributionSet,
			// 系统设置:客服二维码
			kfImg: uni.getStorageSync('system').kf_img,
			// 软件声明
			softwareDesc: uni.getStorageSync('system').software_desc,

			// 暂未使用（测试倒计时）
			currTime: new Date().getTime(),
			// 评分
			percent_1: 0,
			// 商品詳情
			detailInfo: {},
			carousel: [],
			// 产品id
			id: '',
			navIndex: 0,
			// 产品列表
			typeList: [],
			// list
			lists: {},
			// 进度条
			Steps: [],
			StepInfo: {},
			options: {},
			options2: {},

			scene: '',
			cc: 0,
			dd: 0
		};
	},
	onLoad(options) {
		/* if (options.notShow) {
			this.notShow = options.notShow;
		} */
		if (!this.uid) {
			// 右上角三个点分享禁用分享
			wx.hideShareMenu();
		}
		// unparam转对象
		let result = decodeURIComponent(options.scene);
		this.scene = options.scene;
		// 二维码扫码获取到的
		this.options = unparam(result);
		// 自己的（非二维码获取）
		this.options2 = options;

		this.id = this.options.goods_id ? this.options.goods_id : this.options2.goods_id;
		this.pid2 = this.options.uid ? this.options.uid : this.options2.uid;
		if (!uni.getStorageSync('system')) {
			this.system();
		}
		this.getDetail();
	},
	onShow() {
		this.uid = uni.getStorageSync('uid');
	},
	// 监听页面隐藏
	onHide() {
		clearInterval(this.timer);
	},
	// 监听页面卸载
	onUnload() {
		clearInterval(this.timer);
	},
	methods: {
		previewImage(e) {
			uni.previewImage({
				// 需要预览的图片链接列表
				urls: [],
				// 为当前显示图片的链接/索引值
				current: '/static/mp-weixin/qrCode.jpg',
				// 图片指示器样式
				indicator: 'default',
				// 是否可循环预览
				loop: false,
				// 长按图片显示操作菜单，如不填默认为保存相册
				// longPressActions:{
				// 	itemList:[this.l('发送给朋友'),this.l]
				// },
				success: res => {
					console.log('res', res);
				},
				fail: err => {
					onsole.log('err', err);
				}
			});
		},
		// 系统设置
		async system() {
			const result = await this.$http.get({
				url: this.$api.baseSystem
			});
			if (result.code == 0) {
				let systemInfo = result.data;
				// 系统设置:客服二维码
				this.kfImg = systemInfo.kf_img;
				this.distributionSet = systemInfo.distributionSet;
			}
		},
		// 定义倒计时
		countDown(endtime) {
			console.log('this.timeHMS(endtime)',this.timeHMS(endtime),'endtime',endtime)
			let num = this.timeHMS(endtime).days+'.'+this.timeHMS(endtime).hour+'.'+this.timeHMS(endtime).min
			console.log('num=====',num,num=='33.14.30')
			//判断倒计时是否为0，如果为零即可清楚计时器
			if (num == '00.00.00') {
				clearInterval(this.timer);
			}
			this.time = this.timeHMS(endtime);
			console.log("this.time",this.time)
		},
		/* api */
		// 判断登录
		handleLogin() {
			if (this.uid) {
				return true;
			} else {
				let goodsId = this.options.goods_id ? this.options.goods_id : this.options2.goods_id;
				let uids = this.options.uid ? this.options.uid : this.options2.uid;
				uni.navigateTo({
					url: `/pages/login/login?isGroup=1&goods_id=` + goodsId + '&uid=' + uids
				});
			}
		},
		// 单个产品详情
		async getDetail() {
			const result = await this.$http.get({
				url: this.$api.getTgSingle,
				data: {
					// 用户id
					uid: uni.getStorageSync('uid'),
					// 团购产品id
					group_id: this.id
				}
			});
			if (result.code == 0) {
				this.detailInfo = result.data;
				//活动状态 1 未开始 2 进行中 3 已结束
				this.notShow = this.detailInfo.av_status;
				this.$sun.title(this.detailInfo.foods_name ? this.detailInfo.foods_name : '');
				if (this.detailInfo.end_time) {
					this.timeEnd = this.$sun.timestampToTime(this.detailInfo.end_time);
					this.timer = setInterval(() => {
						//调用定义的事件，进行倒计时操作，传入需要结束的时间戳
						// this.countDown(1677520261);
						this.countDown(this.detailInfo.end_time);
					}, 1000);
				}
				this.percent_1 = this.detailInfo.score;
				if (this.distributionSet.distribution_level != 0) {
					// 比率/例=【pid?'二级分销':'一级分销'】 （只有一级分销）
					let radio = Number(this.detailInfo.distribution_level) > 0 ? this.detailInfo.distribution_one : this.distributionSet.distribution_one;
					// 商品佣金= 商品实付款 * (比例/100)
					this.commission = Number(this.detailInfo.discount * (Number(radio) / 100)).toFixed(2);
				}

				this.carousel = this.detailInfo.carousel;

				// 进度/步骤条 start
				if (this.detailInfo.ladder_arr && this.detailInfo.ladder_arr.length > 0) {
					let obj = {
						p_number: '0',
						p_price: this.detailInfo.original_price
					};
					// 在步骤条添加“首条数据”为空
					this.detailInfo.ladder_arr.unshift(obj);
					this.Steps = this.detailInfo.ladder_arr;
					// this.detailInfo.pe_count = 70;
					for (let i = 0; i < this.Steps.length; i++) {
						// 计算已完成的步骤条数
						if (Number(this.detailInfo.pe_count) >= Number(this.Steps[i].p_number)) {
							this.cc++;
						}
						if (Number(this.Steps[i].p_number) >= Number(this.detailInfo.pe_count) && this.detailInfo.pe_count > 0) {
							// 下一个计数
							this.out = this.Steps[i].p_number;
							// 上一个
							let previous = this.Steps[i - 1].p_number;
							if (this.detailInfo.pe_count != this.Steps[i].p_number && this.detailInfo.pe_count < this.Steps[this.Steps.length - 1].p_number) {
								this.bili = (Number(this.detailInfo.pe_count) - Number(previous)) / (Number(this.out) - Number(previous));
								// 每段的百分比*比例
								this.dd = (100 / (Number(this.Steps.length) - 1)) * this.bili;
							} else {
								this.dd = 0;
							}
							break;
						}
					}

					if (this.detailInfo.pe_count < this.Steps[this.Steps.length - 1].p_number) {
						this.Steps[this.Steps.length - 1].p_price = '待揭晓';
					}
					let allSum = Number(this.detailInfo.ladder_arr[this.detailInfo.ladder_arr.length - 1].p_number);
					// 步骤比率（非百分比）
					let ratio = this.detailInfo.pe_count / allSum;
					// 当前步骤=总步骤*步骤比率
					let currents = this.detailInfo.ladder_arr.length * ratio;
					let aa = Number(this.cc - 1);
					let zz = (aa / (this.detailInfo.ladder_arr.length - 1)) * 100 + this.dd;
					this.StepInfo = {
						Current: zz, //百分比（先传条数即可）
						Sum: Number(this.detailInfo.ladder_arr.length) //共多少步骤(Number类型)
					};
				}
				// end

				this.typeList = [
					{
						name: '最近更新',
						content: this.detailInfo.update_time
					},
					{
						name: '发布时间',
						content: this.detailInfo.create_time
					},
					{ name: '开发者', content: this.detailInfo.developer_name, letter: 5 },
					{
						name: '交付方式',
						content: this.detailInfo.give_type
					},
					{
						name: '源码加密',
						content: this.detailInfo.encrypt_type == 2 ? '已加密' : '未加密'
					},
					{
						name: '适用类型',
						content: this.detailInfo.app_type ? numberToString(this.detailInfo.app_type) : ''
					},
					{
						name: '支 持',
						content: this.detailInfo.support_desc,
						letter: 5
					},
					{
						name: '隐私信息获取',
						content: this.detailInfo.privacy_desc
					}
				];
				this.lists = [
					{
						// 产品id
						goods_id: this.detailInfo.foods_id,
						// 团购id
						group_id: this.detailInfo.id,
						// 产品类型(1 普通商品 2 团购)
						foods_type: 2,
						// 单价(现传原价)
						unit_price: this.detailInfo.original_price
					}
				];
				// 增加浏览量
				this.addBrowse();
			}
		},

		// 团购报名
		async signUp() {
			// 余额 =优惠价-报名费
			let money = Number(this.detailInfo.discount) - Number(this.detailInfo.entry_price);
			const result = await this.$http.post({
				url: this.$api.groupSignUp,
				data: {
					// 团购id
					goods_id: this.detailInfo.id,
					// 商品类型	1 普通商品 2 团购
					type: 2,
					// 原价
					price: this.detailInfo.original_price,
					// 实付价
					real_payment: this.detailInfo.discount,
					// 支付类型  1.微信 2，余额
					pay_type: 1,
					list: this.lists,
					// 余额 优惠价-报名费
					surplus_price: money,
					// 报名费
					entry_price: this.detailInfo.entry_price
				}
			});
			if (result.code == 0) {
			}
		},

		// 增加浏览量
		async addBrowse() {
			const result = await this.$http.get({
				url: this.$api.addBrowseNumber,
				data: {
					// 产品id
					goods_id: this.detailInfo.foods_id
				}
			});
			if (result.code == 0) {
			}
		},

		// 增加分享量
		async addShare() {
			const result = await this.$http.get({
				url: this.$api.addShareNumber,
				data: {
					// 产品id
					goods_id: this.detailInfo.foods_id
				}
			});
			if (result.code == 0) {
			}
		},

		/* 点击事件 */
		// 小程序分享 与button的open-type 使用(接口)
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				this.addShare();
			}
			return {
				// 自定义分享标题
				title: this.detailInfo.foods_name,
				imageUrl: this.detailInfo.foods_img,
				path: '/pages/detail/delegation?goods_id=' + this.detailInfo.id + '&uid=' + this.uid
			};
		},
		// 回到首页
		toIndex() {
			this.$sun.navSwitch('/pages/index/index');
		},
		// 分享
		share() {
			if (this.handleLogin()) {
				this.$refs.pop.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false
				});
			}
		},
		// 客服（0）/二维码（1） 弹框
		popClick() {
			this.$refs.popCode.show({
				anim: 'center',
				shadeClose: false, //false使用户不能点击其它关闭页面
				topclose: false
			});
		},

		popCodeClose() {
			this.$refs.popCode.close();
		},
		// 购买弹框
		buy() {
			// 选择规格弹框
			/* this.$refs.popbuy.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false
				}); */
			// 修改11
			if (this.handleLogin()) {
				// this.detailInfo.order_obj.status >= 2 修改
				if (this.detailInfo.order_obj && this.detailInfo.order_obj.status == 1 && this.detailInfo.has_buy == false) {
					this.$sun.toast('待付款列表已有该订单，不能重复报名');
				}
				// <!-- has_buy（bool类型字段 ）：true 已买 ,false 没买 -->
				// yk_status // ==0 (尾款)可以支付 否则不能支付
				// status 是报名订单的状态  yk_status 是余款订单的状态
				// else if (this.detailInfo.has_buy == true && this.detailInfo.order_obj.yk_status != 0) {
				else if (this.detailInfo.has_buy == true && !this.detailInfo.order_obj.yk_status_c) {
					this.$sun.toast('该订单暂不可支付');
				} else if (this.detailInfo.has_buy == true && this.detailInfo.order_obj.yk_status_c == 4) {
					this.$sun.toast('团购订单只能购买一次，您已购买成功');
				} else {
					// 跳转订单页
					this.$sun.navGo('/pages/confirmOrder/confirmOrder');
					clearInterval(this.timer);
				}
			}
		},
		// 跳转购物车
		toGwc() {
			this.$sun.navSwitch('/pages/shopCart/shopCart');
			clearInterval(this.timer);
		},
		cancel() {
			this.$refs.pop.close();
		},
		getChange(e) {
			this.navIndex = e;
		},
		// 生成海报
		poster() {
			this.$sun.navGo('/pages/detail/generatePoster', {
				type: 1
			});
			this.cancel();
		}
	}
};
const numberToString = number => {
	var ar;
	for (let items in number) {
		const m2 = new Map({
			[Symbol.iterator]: function*() {
				yield [1, '公众号'],
					yield [2, '微信小程序'],
					yield [3, 'APP'],
					yield [4, 'PC'],
					yield [5, 'IOS'],
					yield [6, 'Android'],
					yield [7, '字节跳动小程序'],
					yield [8, '支付宝小程序'],
					yield [9, '百度小程序'],
					yield [10, 'h5'];
			}
		});
		var get = m2.get(parseInt(number[items]));
		if (items == 0) {
			ar = get;
		} else {
			ar += '，' + get;
		}
	}

	return ar;
};
</script>

<style lang="less">
/deep/ button::after {
	border: none;
	margin: 0rpx;
	padding: 0rpx;
}

.v-btncss,
.v-btncss2 {
	margin: 0rpx;
	padding: 0rpx;
}

.v-btncss {
	background: #ff6732;
}

.v-btncss2 {
	background: #ffe4e1;
}

.v-delegation-page {
	.v-cover {
		width: 750rpx;
		height: 750rpx;
	}

	.v-top {
		.v-bg {
			background: #ff5f4e;
			padding: 28rpx 30rpx;

			.v-commodity-price {
				.v-price {
					color: #ffffff;
					margin: 0 10rpx;
					font-size: 30rpx;
					font-weight: bold;

					text {
						font-size: 60rpx;
					}
				}

				.v-original-price {
					color: #ffffff;
					font-size: 24rpx;
					text-decoration: line-through;

					text {
						height: 12rpx;
					}
				}
			}
		}

		.v-conent {
			padding: 40rpx 20rpx 14rpx;
			.v-star-score {
				margin-left: 4rpx;
				margin-top: 4rpx;
				color: #ff5f4e;
				font-weight: bold;
			}
		}

		.v-details {
			color: #333;
			font-size: 32rpx;
			margin: 0 34rpx;
		}

		.v-share-padding {
			// margin: 30rpx 0 40rpx;
			margin-top: 30rpx;

			.v-p-share {
				padding: 72rpx 24rpx 0 32rpx;

				.v-m-width {
					margin-right: 20rpx;

					.pt_img {
						width: 60rpx;
						height: 60rpx;
						margin-right: -30rpx;
						border-radius: 50%;
					}
				}

				.v-share-friend {
					text {
						color: #294d7d;
						font-size: 24rpx;
						padding-right: 50rpx;
					}

					view {
						color: #ffffff;
						width: 154rpx;
						height: 58rpx;
					}
				}
				.v-share-friend2 {
					text {
						color: #294d7d;
						font-size: 24rpx;
					}
				}
			}

			.v-share-bottom {
				margin-top: 68rpx;
				color: #8f8f8f;

				text {
					margin-right: 14rpx;
				}
			}
		}

		.v-commission {
			color: #ff5f4e;
			background: #ffe4e1;
			/* margin: 14rpx 20rpx 0;
			padding: 8rpx 16rpx;
 */
			margin: 60rpx 20rpx 0;
			padding: 16rpx;

			.share-icon {
				font-size: 24rpx;
				margin-right: 4rpx;
			}

			view {
				color: #ff5f4e;
			}
		}

		.v-type {
			padding: 40rpx 48rpx 22rpx;

			.v-img {
				height: 28rpx;
				width: 28rpx;
				margin-right: 12rpx;
			}
		}
	}

	.v-margin {
		margin: 24rpx 0 14rpx;
	}

	.v-fixed {
		z-index: 999;
		position: fixed;
		bottom: 240rpx;
		right: 48rpx;

		.v-icon,
		.v-icon2 {
			margin-bottom: 24rpx;
			width: 100rpx;
			height: 100rpx;
			z-index: 9999;
			background-color: #ffffff;
			border-radius: 50%;
			box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);

			image {
				width: 38rpx;
				height: 38rpx;
			}
		}

		.v-icon {
			view {
				// margin-top: 6rpx;
				color: #294d7d;
				font-size: 24rpx;
			}
		}

		.v-icon2 {
			view {
				margin-top: 6rpx;
				color: #fea751;
				font-size: 24rpx;
			}
		}
	}

	.v-down-padding {
		z-index: 999;
		position: fixed;
		bottom: 130rpx;
		right: 0;
		width: 92%;
		height: 80rpx;
		padding: 0 4%;
		background: #fdf9ed;
		.v-yu {
			color: #8f8f8f;
			font-size: 24rpx;
			margin-right: 12rpx;
		}

		.v-count-down {
			view {
				margin-left: 14rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				font-size: 24rpx;
				background: #fea751;
				border-radius: 4rpx;
				width: 60rpx;
				height: 40rpx;
			}
			text {
				margin-left: 14rpx;
				color: #fea751;
				font-size: 24rpx;
			}
		}
	}
	.v-border-btn {
		border-top: 2rpx solid #eee;
	}
	.v-bottom-fixed {
		height: 132rpx;
		width: 100%;
		background-color: #ffffff;
		z-index: 999;
		position: fixed;
		bottom: 0;
		right: 0;
		.v-p-fixed {
			padding: 22rpx 0;
			.v-cart {
				margin-left: 50rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				view {
					margin-top: 4rpx;
					color: #294d7d;
				}
			}

			.v-btn {
				image {
					width: 42rpx;
					height: 46rpx;
					margin-right: 14rpx;
				}

				background: #ff5f4e;
				margin-left: 56rpx;
				padding: 24rpx 0;
				width: 520rpx;
				color: #ffffff;
				font-size: 36rpx;
				font-weight: bold;
			}
			.v-btn2 {
				margin-left: 56rpx;
				background: #ff5f4e;
				// 原32rpx
				padding: 24rpx 0;
				// 删除购物车修改
				// width: 520rpx;
				width: 388rpx;
				color: #ffffff;
				font-size: 36rpx;
			}
			.v-not-btn {
				background: #c1c0c0;
				margin-left: 56rpx;
				padding: 24rpx 0;
				width: 520rpx;
				color: #ffffff;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}

	// 分享
	.v-pop {
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 66rpx;

		.v-pop-margin {
			margin: 0 148rpx;
		}

		.v-select-type {
			view {
				width: 160rpx;
				height: 160rpx;
				background: #f7f7f7;
				border-radius: 10rpx;
			}

			image {
				width: 100rpx;
				height: 80rpx;
			}

			text {
				color: #294d7d;
				margin-top: 28rpx;
			}
		}

		.v-cancel {
			padding: 60rpx 0;
			width: 100%;
			color: #8f8f8f;
			font-size: 36rpx;
		}
	}

	// 二维码
	.v-pop-code {
		.v-qr-code {
			padding: 42rpx 0 56rpx;
			background: #ffffff;
			border-radius: 10rpx;
			width: 526rpx;

			image {
				width: 380rpx;
				height: 380rpx;
			}

			text {
				margin-top: 26rpx;
			}
		}

		.v-close-img {
			width: 82rpx;
			height: 82rpx;
			margin-top: 46rpx;
		}
	}

	// 分类
	.v-pop-buy {
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 50rpx 0;

		.v-sevice {
			color: #8f8f8f;
			padding: 0 20rpx 0 34rpx;
		}

		.v-buy-type {
			margin: 28rpx 0 0 34rpx;
			border: 2rpx solid #ff5f4e;
			color: #ff5f4e;
			padding: 12rpx 34rpx;
			display: inline-block;
		}
	}
}
</style>
